:host {
  display: inline-block;
  vertical-align: middle;
}

:host * {
  outline: none;
}

label {
  display: flex;
  gap: var(--bl-size-2xs);
  color: var(--bl-color-neutral-darker);
  font: var(--bl-font-title-3);
  cursor: pointer;
  user-select: none;
}

.label {
  overflow-wrap: anywhere;
}

.dirty.invalid label {
  margin-bottom: var(--bl-size-3xs);
}

.checkbox-container {
  position: relative;
}

input[type="checkbox"] {
  appearance: none;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--bl-color-neutral-lighter);
  border-radius: var(--bl-border-radius-xs);
  width: var(--bl-size-m);
  height: var(--bl-size-m);
  min-width: var(--bl-size-m);
  min-height: var(--bl-size-m);
  max-width: var(--bl-size-m);
  max-height: var(--bl-size-m);
}

.check-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--bl-size-m);
  height: var(--bl-size-m);
  min-width: var(--bl-size-m);
  min-height: var(--bl-size-m);
  max-width: var(--bl-size-m);
  max-height: var(--bl-size-m);
  border: 1px solid var(--bl-color-neutral-lighter);
  border-radius: var(--bl-border-radius-xs);
  color: var(--bl-color-neutral-full);
  font-size: var(--bl-font-size-2xs);
  background-color: var(--bl-color-neutral-full);
}

.required-suffix {
  color: var(--bl-color-danger);
  margin-inline-start: calc(var(--bl-size-2xs) * -1);
}

.dirty.invalid .check-mark {
  border-color: var(--bl-color-danger);
}

.hint {
  display: none;
  font: var(--bl-font-body-text-3);
}

.hint p {
  padding: 0;
  margin: 0;
}

.dirty.invalid .hint {
  display: block;
}

.invalid-text {
  display: none;
  color: var(--bl-color-danger);
}

.dirty.invalid .invalid-text {
  display: block;
}

:host([checked]) .label,
:host(:hover) .label {
  color: var(--bl-color-primary);
}

:host(:is([checked], [indeterminate])) .check-mark {
  background-color: var(--bl-color-primary);
  border: none;
}

:host([disabled]) {
  cursor: not-allowed;
  pointer-events: none;
}

:host([disabled]) .check-mark,
:host([disabled]) .label {
  color: var(--bl-color-neutral-light);
  border: 1px solid var(--bl-color-neutral-lighter);
}

:host([disabled]) .check-mark {
  background-color: var(--bl-color-neutral-lightest);
}

:host(:not([disabled])) input:focus-visible + .check-mark {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--bl-color-primary);
}
